<template>
  <v-row justify="center">
    <v-dialog v-model="dialog" persistent scrollable max-width="800px">
      <v-card>
        <v-card-title>
          <span class="headline">转团</span>
        </v-card-title>
        <v-card-text>
          <v-expansion-panels
            v-model="panel"
            multiple
          >
            <v-expansion-panel>
              <v-expansion-panel-header>基础信息</v-expansion-panel-header>
              <v-expansion-panel-content>
                <v-row align="center">
                  <v-col cols="12" md="6">
                    <label style="width: 100px;display:inline-block;color: #a4a4a4;">订单号</label>
                    <span>202255555</span>
                  </v-col>
                  <v-col cols="12" md="6">
                    <label style="width: 100px;display:inline-block;color: #a4a4a4;">订单人数</label>
                    <span>6成人, 2儿童</span>
                  </v-col>
                  <v-col cols="12" md="6">
                    <label style="width: 100px;display:inline-block;color: #a4a4a4;">接散团日期</label>
                    <span>2020-08-02/2020-09-02</span>
                  </v-col>
                  <v-col cols="12" md="6">
                    <label style="width: 100px;display:inline-block;color: #a4a4a4;">行程天数</label>
                    <span>2天一晚</span>
                  </v-col>
                  <v-col cols="12">
                    <label style="width: 100px;display:inline-block;color: #a4a4a4;">线路名称</label>
                    <span>桂平5日游</span>
                  </v-col>
                  <v-col cols="12">
                    <label style="width: 100px;display:inline-block;color: #a4a4a4;">当前团号</label>
                    <span>wz-200801-C</span>
                  </v-col>
                </v-row>
              </v-expansion-panel-content>
            </v-expansion-panel>
            <v-expansion-panel readonly>
              <v-expansion-panel-header hide-actions>选择转到团</v-expansion-panel-header>
              <v-expansion-panel-content>
                Some content
              </v-expansion-panel-content>
            </v-expansion-panel>
          </v-expansion-panels>
        </v-card-text>
        <v-divider></v-divider>
        <v-card-actions>
          <v-spacer></v-spacer>
          <v-btn text @click="dialog = false">取消</v-btn>
          <v-btn color="primary" text @click="dialog = false">保存</v-btn>
        </v-card-actions>
      </v-card>
    </v-dialog>
  </v-row>
</template>

<script>
export default {
  props: {
    show: {
      type: Boolean,
      default: false
    }
  },
  computed: {
    dialog: {
      get() {
        return this.show
      },
      set(bool) {
        this.$emit('update:show', bool)
      }
    }
  },
  data() {
    return {
      panel: [0, 1],
    }
  }
}
</script>

<style>

</style>